import React, { Component } from 'react';
import { Tabs ,Collapse} from 'antd';
import Message from './Message';
import HomeHead from "./HomeHead";
const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;
class Home extends Component {
    constructor(props) {
        super(props);
        this.state={
            homeTitle:'消息',
        }
        this.tabChange=this.tabChange.bind(this);
    };
    tabChange(e){
        if(e==='1'){
            this.setState({
                homeTitle:'消息',
            })
        }
        else {
            this.setState({
                homeTitle:'联系人',
            })
        }
    }
    render() {
        return (
            <div className="home">
                <HomeHead title={this.state.homeTitle}/>
                <Tabs tabPosition="bottom" className="bottomTabs" onChange={this.tabChange}>
                    <TabPane tab="消息" key="1" className="tabPane">
                        <Message/>
                    </TabPane>
                    <TabPane tab="联系人" key="2" className="tabPane">
                        <Collapse bordered={false} className="chatMen">
                            <Panel  header="This is panel header 1" key="1">
                                <Collapse bordered={false} >
                                    <Panel  header="This is panel header 4" key="4">
                                        <p>{text}</p>
                                    </Panel>
                                </Collapse>
                            </Panel>
                            <Panel  header="This is panel header 2" key="2">
                                <p>{text}</p>
                            </Panel>
                            <Panel  header="This is panel header 3" key="3">
                                <p>{text}</p>
                            </Panel>
                        </Collapse>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

export default Home;
